<!-- 
 * 注册用户管理
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
  <div class="registeredUser-container"></div>
  <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
  <div v-if="routerCutLevel === 2" class="listPage">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="getUserList()"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @colSelect="colSelect" @refresh="getUserList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="50" :handleFun="handleFun" @statusHandleEvent="statusHandleEvent" :isShowByStatus="true" class="registeredUser">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getUserListApi } from '@/api/interface/userManage.js'
import { getUserStatusApi } from '@/api/interface/registerUserManage.js'
import { sessionstorage } from '@/utils/storage.js'
import { colFilters } from '@/utils/common.js'


const router = useRouter();
const store = useStore();
const state = reactive({
  formModel: {//注册用户管理搜索列表的参数
    certificationStatus: '',//状态
  },
  formLabel: [
    {
      label: '状态',
      model: "certificationStatus",
      type: "select",
      width: '160',
      placeholder: '请选择状态',
      option: [],

    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '用户账号',
      prop: "userName",
    },
    {
      label: '用户类型',
      prop: "userTypeName",
    },
    {
      label: '姓名',
      prop: "realName",
    },
    {
      label: '手机号码',
      prop: "mobile",
    },
    {
      label: '企业名称',
      prop: "companyName",
    },
    // {
    //   label: '企业类型',
    //   prop: "companyType",
    // },
    {
      label: '状态',
      prop: "certificationStatusName",
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  selectTableId: [],//选择表格数据

})
//区域加载
const loading = ref(false)
//科研机构模块功能按钮
const btnList = reactive([
  // {
  //   name: '导出全量注册用户',
  //   icon: 'daochu1',
  //   bgColor: '#00A2FF'
  // },
  // {
  //   name: '导出选中注册用户',
  //   icon: 'daochu1',
  //   bgColor: '#00A2FF'
  // },


])

const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel'];
});

const userStatus = ref([])



onMounted(() => {
  getUserStatus()
  getUserList()

})

//获取用户状态
const getUserStatus = async () => {
  await getUserStatusApi().then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[0].option = data
      userStatus.value = data
    }
  })
}

//获取注册用户列表
const getUserList = () => {
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    certificationStatus: state.formModel.certificationStatus
  }
  loading.value = true
  getUserListApi(params).then(res => {
    const { status, data } = res
    if (status == 200) {
      loading.value = false
      state.tableData = data.result.map(item => ({
        ...item,
        status: item.certificationStatus
      }))
      state.tableData.forEach(item => {
        userStatus.value.forEach(k => {
          if (k.value == item.certificationStatus) {
            item.certificationStatusName = k.key
          }
        }
        )
      })
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
    }
  })
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getUserList()
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getUserList()
}
//过滤器
const handleFun = (id) => {
  let obj = {
    text: "",
    icon: "",
    color: ''
  }
  switch (id) {
    case 'NOT_SAVE'://NOT_SAVE
      obj.text = "";
      obj.icon = ''
      break;
    case 'SAVE':
      obj.text = "审核";
      obj.icon = 'anjianshenhe';
      obj.color = '#FFB018'
      break;
    case 'SUCCESS':
      obj.text = "查看";
      obj.icon = 'chakan1';
      obj.color = '#00A2FF'
      break;
    case 'BACK':
      obj.text = "查看";
      obj.icon = 'chakan1';
      obj.color = '#00A2FF'
      break;
  }
  return obj;
}
//根据状态操作点击事件
const statusHandleEvent = (row) => {
  sessionstorage.set('registerUserInfo', row)
  switch (row.status) {
    case 'SAVE'://审核
      router.push({ name: 'Certification' }).catch(() => { });
      break;
    case 'SUCCESS'://查看
      router.push({ name: 'RegisteredUserDetails', params: row }).catch(() => { });
      break;
    case 'BACK'://查看
      router.push({ name: 'RegisteredUserDetails', params: row }).catch(() => { });
      break;

  }
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getUserList()
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//选择表格数据
const getSelectChange = (row) => {
  //   state.selectTableId = row.map(item => item.id)
}

</script>


<style lang="scss" scoped>
.registeredUser {
  :deep(.el-table-fixed-column--right .cell .statusBtn) {
    margin: 0 !important;
  }
}
</style>
